<template>
  <je-modal
    ref="$Ddlmodel"
    v-model:visible="visibleModule"
    width="1250px"
    :title="$t('viewModal.btnDdlText')"
    class="modal-updatekey"
    :resize="false"
    :ok-button="addModule"
    cancel-button
    @close="cancelModal"
  >
    <div ref="$rowView" class="modal-updatekey-context">
      <je-collapse v-model:activeKey="activeKey" collapsible="disabled">
        <je-collapse-panel key="1" :show-arrow="false">
          <template #header>
            <div class="modify-output">
              <div>
                输出列：【<span class="line">{{ modifyData.line }}</span
                >】条数据
              </div>
              <div class="modify-output-icon">
                <span @click.stop="updateViewHeight('top')"
                  ><i
                    :class="`jeicon ${
                      updateHightMark.topMark == 'open' ? 'jeicon-an' : 'jeicon-packup'
                    }`"
                  ></i
                ></span>
              </div>
            </div>
          </template>
          <div class="outputeditor-modify" :style="`height: ${viewHeight.modifyTopHeight}`">
            <je-editor-code
              key="modifyDataEditor1"
              v-model:value="modifyData.outputColumn"
              :hide-api="true"
              height="100%"
              :editor-options="{ minimap: { enabled: false } }"
              language="sql"
              width="100%"
            />
          </div>
        </je-collapse-panel>
        <je-collapse-panel key="2" :show-arrow="false">
          <template #header>
            <div class="condition">
              <div class="condition-tab">
                <span
                  :class="[modifyTabKey == 'modifyTab1' ? 'checked' : '']"
                  @click.stop="doCutModifyTab('modifyTab1')"
                >
                  关系条件
                </span>
                <span
                  style="margin-left: 20px"
                  :class="[modifyTabKey == 'modifyTab2' ? 'checked' : '']"
                  @click.stop="doCutModifyTab('modifyTab2')"
                >
                  关系说明
                </span>
              </div>
              <div class="condition-button">
                <span
                  style="margin-left: 15px; cursor: pointer"
                  @click.stop="updateViewHeight('bottom')"
                  ><i
                    :class="`jeicon ${
                      updateHightMark.bottomMark == 'open' ? 'jeicon-an' : 'jeicon-packup'
                    }`"
                  ></i
                ></span>
              </div>
            </div>
          </template>
          <div :style="`height: ${viewHeight.modifyBottomHeight}`">
            <je-editor-code
              v-if="modifyTabKey == 'modifyTab1'"
              key="modifyDataEditor2"
              v-model:value="modifyData.condition"
              language="sql"
              height="100%"
              :editor-options="{ minimap: { enabled: false } }"
              :hide-api="true"
              width="100%"
            />
            <div v-if="modifyTabKey == 'modifyTab2'" style="height: 100%; position: relative">
              <div class="modifyTab2-button">
                <je-button type="text" @click="doTranslate">自然语言智能翻译</je-button>
              </div>
              <je-textarea
                v-model:value="modifyData.conditionStatement"
                class="modifyTab2-button-textarea"
              />
            </div>
          </div>
        </je-collapse-panel>
      </je-collapse>
    </div>
  </je-modal>
</template>
<script>
  import { defineComponent, ref, reactive, watch, onMounted, nextTick } from 'vue';
  import { Modal, Collapse, EditorCode, Input, Button } from '@jecloud/ui';
  import { getTranslate } from '@/api/index';

  export default defineComponent({
    name: 'ViewDdl',
    components: {
      JeModal: Modal,
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeEditorCode: EditorCode,
      JeTextarea: Input.TextArea,
      JeButton: Button,
    },
    props: {
      modalData: {
        type: String,
        required: true,
        default: '',
      },
      viewSql: {
        type: String,
        default: '',
      },
      strData: String,
    },
    emits: ['changeDdlValue'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const $rowView = ref(null);
      const visibleModule = ref(true);
      const activeKey = ref(['1', '2']);
      const modifyTabKey = ref('modifyTab1');
      const viewHeight = reactive({
        modifyTopHeight: '400px',
        modifyBottomHeight: '200px',
      });
      const updateHightMark = reactive({
        topMark: 'open',
        bottomMark: 'open',
      });
      // 新数据
      const modifyData = reactive({
        line: '',
        outputColumn: '',
        condition: '',
        conditionStatement: '',
      });
      const $Ddlmodel = ref(null);
      // 初始化组件的高度
      const initViewHight = () => {
        if ($rowView.value) {
          const $el = $rowView.value;
          const rowHight = $el.offsetHeight;
          const height = (rowHight - 35 * 2) / 2;
          viewHeight.modifyTopHeight = height + 'px';
          viewHeight.modifyBottomHeight = height + 'px';
        }
      };

      watch(
        () => $rowView.value,
        () => {
          initViewHight();
        },
        { immediate: true },
      );

      onMounted(() => {
        nextTick(() => {
          initData();
          watch(
            () => $Ddlmodel.value?.reactData.zoomLocation,
            () => {
              doUpdateHight();
            },
          );
        });
      });

      const initData = () => {
        const newSql = props.modalData;
        const newSqlArray = newSql.split('FROM');
        modifyData.outputColumn = newSqlArray[0];
        modifyData.condition = 'FROM' + newSqlArray[1];
        modifyData.line = modifyData.outputColumn.split(',').length;
      };

      // 切换右侧侧tab签
      const doCutModifyTab = (type) => {
        modifyTabKey.value = type;
      };
      // 动态计算高度
      const updateViewHeight = (type) => {
        const $el = $rowView.value;
        const rowHight = $el.offsetHeight;
        // 如果点的是上面要展开的按钮
        if (type == 'top' && updateHightMark.topMark == 'open') {
          const height = rowHight - 35 * 2 + 'px';
          viewHeight.modifyTopHeight = height;
          updateHightMark.topMark = 'off';
          updateHightMark.bottomMark = 'open';
          activeKey.value = ['1'];
        }
        // 如果点的是下面要展开的按钮
        else if (type == 'bottom' && updateHightMark.bottomMark == 'open') {
          const height = rowHight - 35 * 2 + 'px';
          viewHeight.modifyBottomHeight = height;
          updateHightMark.bottomMark = 'off';
          updateHightMark.topMark = 'open';
          activeKey.value = ['2'];
        }
        // 恢复原始高度
        else if (updateHightMark.topMark == 'off' || updateHightMark.bottomMark == 'off') {
          const height = (rowHight - 35 * 2) / 2 + 'px';
          viewHeight.modifyTopHeight = height;
          viewHeight.modifyBottomHeight = height;
          activeKey.value = ['1', '2'];
          if (type == 'top') {
            updateHightMark.topMark = 'open';
          } else {
            updateHightMark.bottomMark = 'open';
          }
        }
      };

      // 自然语言翻译
      const doTranslate = () => {
        getTranslate({ strData: props.strData, sql: modifyData.condition }).then((data) => {
          modifyData.conditionStatement = data;
        });
      };

      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeDdlValue', 'cancel');
      };
      const addModule = ({ $modal, button }) => {
        emit(
          'changeDdlValue',
          modifyData.outputColumn + modifyData.condition,
          modifyData.conditionStatement,
        );
      };
      const doUpdateHight = () => {
        const $el = $rowView.value;
        const rowHight = $el.offsetHeight;
        if (updateHightMark.topMark == 'open' && updateHightMark.bottomMark == 'open') {
          const height = (rowHight - 35 * 2) / 2 + 'px';
          viewHeight.modifyTopHeight = height;
          viewHeight.modifyBottomHeight = height;
        } else {
          const height = rowHight - 35 * 2 + 'px';
          if (updateHightMark.topMark == 'off') {
            viewHeight.modifyTopHeight = height;
          }
          if (updateHightMark.bottomMark == 'off') {
            viewHeight.modifyBottomHeight = height;
          }
        }
      };
      return {
        $rowView,
        cancelModal,
        visibleModule,
        addModule,
        activeKey,
        modifyTabKey,
        viewHeight,
        updateHightMark,
        modifyData,
        doCutModifyTab,
        updateViewHeight,
        doTranslate,
        $Ddlmodel,
      };
    },
  });
</script>
<style lang="less" scoped>
  .modal-updatekey {
    .annotation {
      color: #aaaaaa;
      line-height: 28px;
      font-size: 14px;
      font-weight: Italic;
      display: inline-block;
      font-style: oblique;
    }
  }
</style>

<style lang="less" scoped>
  .modal-updatekey {
    &-context {
      height: 100%;
      overflow: auto;
      .line {
        color: #3265f5;
      }
      .condition {
        width: 100%;
        position: relative;
        .condition-button {
          position: absolute;
          right: 0;
          top: 0;
          span {
            display: inline-block;
          }
          .btn {
            color: #3265f5;
          }
        }
        .condition-tab {
          span {
            display: inline-block;
            cursor: pointer;
          }
          span.checked {
            position: relative;
            color: #3265f5;
            &::before {
              height: 2px;
              content: '';
              position: absolute;
              background: #3265f5;
              width: 100%;
              bottom: -1px;
            }
          }
        }
      }
      .modify-output {
        width: 100%;
        position: relative;
        .modify-output-icon {
          cursor: pointer;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      .modifyTab2-button {
        height: 32px;
        &-textarea {
          position: absolute;
          top: 32px;
          bottom: 0;
        }
      }
      .originalTab2-button-textarea {
        border: 0px;
      }
    }
  }
</style>
<style lang="less">
  .modal-updatekey {
    &-context {
      .ant-collapse {
        .ant-collapse-item {
          .ant-collapse-header {
            padding: 0px 16px !important;
            background: #f7f9fc !important;
            height: 32px;
            line-height: 32px;
            color: rgba(0, 0, 0, 0.85) !important;
            cursor: default !important;
          }
          .prompt {
            color: #3265f5;
            vertical-align: top;
            font-style: italic;
            margin-left: 10px;
          }
          .info {
            padding: 10px;
            border: 1px solid #a8d09d;
            background: #eff9f2;
            color: #36761f;
            font-size: 14px;
          }
          .ant-collapse-content {
            .ant-collapse-content-box {
              padding: 0 !important;
            }
          }
        }
      }
    }
  }
</style>
